<route lang="json5" type="page">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>

<template>
	<view>
		<view class="page-container">
			<image :src="bgimg1" mode="widthFix" style="width: 100%;position: absolute;top: 0;"></image>
			<view style="display: flex;justify-content: center;align-items: center;">
				<image :src="bgimg2" style="height: 15rem;width:15rem;position: absolute;top: 1rem;"></image>
			</view>
			<view class="text-center">
				<view class="title text-shadow">盛荣CCER</view>
				<view
					style="display: flex;justify-content: space-evenly;width: 100%;padding: .8rem 4rem 0 4rem;color: rgb(161 161 161);align-items: center;">
					<view style="display: flex;justify-content: center;flex-direction: column;"
						@click="toggleLoginWay(1)">
						<view :style="{color:loginWay == 1?('rgb(47, 212, 174)'):''}">登录</view>
						<view :style="{background:loginWay == 1?('rgb(47, 212, 174)'):''}"
							style="height: 3px;border-radius: 20px;"></view>
					</view>
					<view style="height: 30upx;width: 1px;background: rgb(201 201 201);"></view>
					<view style="display: flex;justify-content: center;flex-direction: column;"
						@click="toggleLoginWay(2)">
						<view :style="{color:loginWay == 2?('rgb(47, 212, 174)'):''}">注册</view>
						<view :style="{background:loginWay == 2?('rgb(47, 212, 174)'):''}"
							style="height: 3px;border-radius: 20px;"></view>
					</view>
				</view>
				<view class="enter-area">
					<view v-if="loginWay == 1" class="account-login-area">
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="user" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入账号" :maxlength="20" v-model.trim="userName"></wd-input>
						</view>
						<view class="box password">
							<wd-icon color="rgb(47, 212, 174)" name="lock-on" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<input class="uni-input" :maxlength="30" placeholder="请输入密码" :password="showPassword"
								v-model.trim="password" />
							<wd-icon v-if="showPassword" name="eye-close" size="18px"
								@click="handleChangePassword"></wd-icon>
							<wd-icon v-else name="view" size="18px" @click="handleChangePassword"></wd-icon>
						</view>
						<!-- 						<view class="box password">
							<wd-icon color="rgb(47, 212, 174)" name="secured" size="22px"></wd-icon>
							<view style="height: 40upx;width: 1px;background: rgb(201 201 201);margin: 0 20upx;"></view>
							<wd-input placeholder="请输入验证码" :maxlength="4" v-model="smsCode"></wd-input>
							<wd-button :round="false" size="small" custom-class="sendSMSBtn" plain hairline
								:disabled="isSendSMSEnable" @click="handleSMSSend">
								1234
							</wd-button>
						</view> -->
					</view>
					<view v-else class="phone-login-area">
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="user-circle" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入账号" :maxlength="20" v-model.trim="zcAccounts"></wd-input>
						</view>
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="user" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入用户名" :maxlength="20" v-model.trim="zcUserName"></wd-input>
						</view>
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="lock-on" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入密码" :maxlength="30" show-password
								v-model.trim="zcPassword"></wd-input>
						</view>
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="lock-on" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请再次输入密码" :maxlength="30" show-password
								v-model.trim="zczPassword"></wd-input>
						</view>
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="phone" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入手机号" :maxlength="11" v-model.trim="zcPhone"></wd-input>
						</view>
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="mail" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入邮箱" :maxlength="30" v-model.trim="zcMail"></wd-input>
						</view>
						<!-- 						<view class="box password">
							<wd-icon color="rgb(47, 212, 174)" name="secured" size="22px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入验证码" :maxlength="4" v-model="smsCode"></wd-input>
							<wd-button :round="false" size="small" custom-class="sendSMSBtn" plain hairline
								:disabled="isSendSMSEnable" @click="handleSMSSend">
								1234
							</wd-button>
						</view> -->
						<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="user-add" size="20px"></wd-icon>
							<view style="height: 20px;width: 1px;background: rgb(201 201 201);margin: 0 10px;"></view>
							<wd-input placeholder="请输入邀请码" :maxlength="20" v-model.trim="zcCode"></wd-input>
						</view>
						<view class="box account">
							<!-- 						<wd-icon color="rgb(47, 212, 174)" name="user-avatar" size="20px"></wd-icon>
							<view style="height: 40upx;width: 1px;background: rgb(201 201 201);margin: 0 20upx;"></view>
							<wd-picker placeholder="请选择用户类型" :columns="yhColumns" v-model="yhValue"
								@confirm="handleConfirms" /> -->
							<wd-radio-group :shape="'dot'" v-model="typeValue" inline>
								<wd-radio value="1">用户</wd-radio>
								<wd-radio value="0">碳商</wd-radio>
							</wd-radio-group>
						</view>
						<!-- 					<view class="box account">
							<wd-icon color="rgb(47, 212, 174)" name="usergroup" size="20px"></wd-icon>
							<view style="height: 40upx;width: 1px;background: rgb(201 201 201);margin: 0 20upx;"></view>
							<wd-picker placeholder="请选择所属碳商" :columns="columns" v-model="tsValue"
								@confirm="handleConfirm" />
						</view> -->
					</view>
				</view>
				<view class="btn-area" style="margin-bottom: 1rem;">
					<button v-if="loginWay == 1"
						style="height: 2.625rem;display: flex;align-items: center;justify-content: center;color: #FFF;background-color: #2fd4ae;"
						@click="accountLogin()">
						登录
					</button>
					<button v-else
						style="height: 2.625rem;display: flex;align-items: center;justify-content: center;color: #FFF;background-color: #2fd4ae;"
						@click="Register()">
						注册
					</button>
				</view>
			</view>
			<wd-notify />
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { useNotify, useToast } from 'wot-design-uni'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { http } from '@/utils/http'
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO,
		APP_ROUTE,
		APP_CONFIG,
		HOME_CONFIG_EXPIRED_TIME,
		HOME_PAGE,
	} from '@/common/constants'
	import { cache, getFileAccessHttpUrl } from '@/common/uitls'
	import { useRouter } from '@/plugin/uni-mini-router'
	import { useParamsStore } from '@/store/page-params'

	defineOptions({
		name: 'login',
		options: {
			// apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
			// shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
			styleIsolation: 'shared',
		},
	})
	const typeValue = ref("1")
	const bgimg1 = '/static/bg1.png'
	const bgimg2 = '/static/bg2.png'
	const router = useRouter()
	const shape = ref()
	const loading = ref(false)
	const userName = ref()
	const password = ref()
	const phoneNo = ref('')
	const smsCode = ref('')
	const showPassword = ref(true) //是否显示明文
	const loginWay = ref(1) //1: 登录，2：注册
	const smsCountDown = ref(0)
	let smsCountInterval = null
	const toggleDelay = ref(false)
	const version = ref('')
	const paramsStore = useParamsStore()
	paramsStore.reset()

	const columns = ref([])
	const yhValue = ref('')
	const yhColumns = ref([{ label: '用户', value: '1' }, { label: '碳商', value: '0' }])

	const zcAccounts = ref('')
	const zcUserName = ref('')
	const zcPassword = ref('')
	const zczPassword = ref('')
	const zcPhone = ref('')
	const zcMail = ref('')
	const zcCode = ref('')
	const tsValue = ref('')

	function handleConfirm({ value }) {
		tsValue.value = value
	}
	function handleConfirms({ value }) {
		yhValue.value = value
	}
	const handleChangePassword = () => {
		showPassword.value = !showPassword.value
	}
	// 是否开启本地路由配置
	let isLocalConfig = getApp().globalData.isLocalConfig;

	const toast = useToast()
	const userStore = useUserStore()
	const toggleLoginWay = (val) => {
		loginWay.value = val
		if (val == 1) {
			userName.value = ''
			password.value = ''
		} else {
			zcAccounts.value = ''
			zcUserName.value = ''
			zcPassword.value = ''
			zczPassword.value = ''
			zcPhone.value = ''
			zcMail.value = ''
			zcCode.value = ''
			tsValue.value = ''
			yhValue.value = ''
		}
	}

	//账户登录
	const accountLogin = () => {
		if (!userName.value || userName.value.length === 0) {
			toast.warning('请输入账号')
			return
		}
		if (!password.value || password.value.length === 0) {
			toast.warning('请输入密码')
			return
		}
		loading.value = true
		http
			.post('/sys/mLogin', { username: userName.value, password: password.value })
			.then((res : any) => {
				if (res.success) {
					const { result } = res
					const userInfo = result.userInfo
					userStore.setUserInfo({
						...userInfo,
						token: result.token,
						userid: userInfo.id,
						username: userInfo.username,
						realname: userInfo.realname,
						avatar: userInfo.avatar,
						tenantId: userInfo.loginTenantId,
						localStorageTime: +new Date(),
					})
					router.pushTab({ path: HOME_PAGE })
					toast.success('登陆成功')
				} else {
					toast.warning(res.message)
				}
			})
			.finally(() => {
				loading.value = false
			})
	}
	function validatePhoneNumber(phoneNumber : any) {
		const phoneRegex = /^1[3-9]\d{9}$/;
		return phoneRegex.test(phoneNumber);
	}
	function isValidEmail(email : any) {
		const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		return emailPattern.test(email);
	}
	//注册
	const Register = () => {
		if (!zcAccounts.value || zcAccounts.value.length === 0) {
			toast.warning('请输入账号')
			return
		}
		if (!zcUserName.value || zcUserName.value.length === 0) {
			toast.warning('请输入用户名')
			return
		}
		if (!zcPassword.value || zcPassword.value.length === 0) {
			toast.warning('请输入密码')
			return
		}
		if (zcPassword.value.length < 6) {
			toast.warning('密码至少6位数')
			return
		}
		if (zcPassword.value !== zczPassword.value) {
			toast.warning('两次输入的密码不一致')
			return
		}
		if (!zcPhone.value || zcPhone.value.length === 0) {
			toast.warning('请输入手机号')
			return
		}
		if (!validatePhoneNumber(zcPhone.value)) {
			toast.warning('请输入正确手机号码')
			return
		}
		if (!zcMail.value || zcMail.value.length === 0) {
			toast.warning('请输入邮箱')
			return
		}
		if (!isValidEmail(zcMail.value)) {
			toast.warning('请输入正确邮箱')
			return
		}
		http
			.post('/sys/user/AppRegister', {
				"id": "",
				"username": zcAccounts.value,
				"realname": zcUserName.value,
				"password": zcPassword.value,
				"avatar": "",
				"birthday": "",
				"sex": 0,
				"email": zcMail.value,
				"phone": zcPhone.value,
				"orgCode": "",
				"loginTenantId": 0,
				"orgCodeTxt": "",
				"status": 0,
				"delFlag": 0,
				"workNo": "",
				"post": "",
				"telephone": zcPhone.value,
				"createBy": "",
				"createTime": "",
				"updateBy": "",
				"updateTime": "",
				"activitiSync": 0,
				"userIdentity": yhValue.value,
				"isUser": typeValue.value,
				"departIds": tsValue.value,
				"relTenantIds": "",
				"clientId": "",
				"homePath": "",
				"postText": "",
				"bpmStatus": "",
				"izBindThird": true,
				"invitationCode": zcCode.value
			})
			.then((res : any) => {
				if (res.success) {
					toast.success(res.message)
					loginWay.value = 1
				} else {
					toast.warning(res.message)
				}
			})
			.finally(() => {
				loading.value = false
			})
	}

	const checkToken = () => {
		const { userInfo, clearUserInfo } = userStore
		if (userInfo.token) {
			if (+new Date() - userInfo.localStorageTime > 2 * 3600000) {
				// 超过2小时过期
				clearUserInfo()
			} else {
				router.pushTab({ path: HOME_PAGE })
			}
		} else {
			clearUserInfo()
		}
	}
	const appQueryGroup = () => {
		http
			.get('/zbCarbonMerchant/zbCarbonMerchant/list', {
				zbCarbonMerchant: { "id": "", "carbonSign": "", "carbonName": "", "creditCode": "", "province": "", "city": "", "district": "", "carbonStatus": "", "createTime": "", "createBy": "", "updateTime": "", "updateBy": "", "sysOrgCode": "" },
				pageNo: 1,
				pageSize: 100
			})
			.then((res : any) => {
				if (res.success && res.result.records.length > 0) {
					let updatedUsers = res.result.records.map(info => ({
						label: info.carbonName,
						value: info.id
					}));
					columns.value = updatedUsers
				}
			})
	}
	const onInit = () => {
		console.log('1')
		// appQueryGroup()
	}
	onInit()
	// #ifdef APP-PLUS || H5
	checkToken()
	// #endif
</script>

<style lang="scss" scoped>
	//

	.page-container {
		// padding-top: 500upx;
		position: relative;
		font-size: 15px;
		color: var(--UI-FG-0);
		background: #FFF;
		overflow: auto;
		height: 100vh;

		.text-center {
			padding: 500upx 20upx 0 20upx;
		}

		.title {
			font-size: 56upx;
		}

		.enter-area {
			padding-top: 15px;
			width: 92%;
			margin: 0 4% 40upx 4%;

			.box {
				display: flex;
				align-items: center;
				min-height: 80upx;
				color: #000;
				border: 1px solid #eee;
				background-color: #fff;
				padding: 0 20upx;
				margin-bottom: 30upx;
				border: 1px solid #cbcbcb;
				border-radius: 5px;

				:deep(.wd-text) {
					margin: 0 10upx;
				}

				:deep(.wd-input),
				:deep(.uni-input) {
					flex: 1;

					&::after {
						height: 0;
					}
				}

				.uni-input {
					text-align: left;
					font-size: var(--wot-input-fs, var(--wot-cell-title-fs, 14px));
					height: var(--wot-input-inner-height, 34px);
					color: var(--wot-input-color, #262626);

					.uni-input-placeholder {
						color: var(--wot-input-placeholder-color, #bfbfbf);
					}
				}
			}

			:deep(.sendSMSBtn) {
				margin-left: 20upx;
				color: #000;
				background: rgb(47, 212, 174);
				border: antiquewhite;
				font-size: 14px;
				font-weight: 600;
			}

			:deep(.wd-icon-view),
			:deep(.wd-icon-eye-close) {
				color: #555;
			}
		}

		.btn-area {
			:deep(.login) {
				margin-right: 30px;
			}

			:deep(.wd-button) {
				--wot-button-medium-height: 41px;
				--wot-button-medium-fs: 16px;
				--wot-button-plain-bg-color: transparent;
				min-width: 100px;
				box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
			}
		}
	}

	:deep(.wd-picker__cell) {
		padding: 10px 0px;
	}

	:deep(.wd-radio.is-inline) {
		margin-right: 50px !important;
	}
</style>